<template>
  <div>
    <el-form
      :model="selectForm"
      ref="form"
      label-width="80px"
      :inline="false"
      size="mini"
      style="margin-top: 10px"
    >
      <el-row style="width: 80%">
        <el-col :span="5" :offset="0">
          <el-form-item label="关键字">
            <el-input
              v-model="selectForm.keyword"
              placeholder="请输入标题或者内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label="维修人员">
            <el-select
              v-model="selectForm.repairUser"
              value-key="id"
              clearable
              filterable
            >
              <el-option
                v-for="item in repairUserList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="交付时间" size="mini">
            <el-date-picker
              size="mini"
              v-model="selectForm.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form :inline="true" size="mini" style="margin-left: 20px">
            <el-form-item>
              <el-button type="primary" @click="getData">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="tableData" v-loading="isLoading">
      <el-table-column prop="id" label="id" width="60" />
      <el-table-column
        prop="title"
        :show-overflow-tooltip="true"
        label="标题"
      />
      <el-table-column
        prop="content"
        :show-overflow-tooltip="true"
        label="内容"
      />
      <el-table-column prop="repairUserName" label="维修人员" width="100" />
      <el-table-column prop="checkUserName" label="质检人员" width="100" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="endTime" label="交付时间" />
      <el-table-column prop="checkTime" label="完成时间" />
      <el-table-column prop="money" label="金额" />
    </el-table>

    </div>
</template>
<script>
import dayjs from "dayjs";
export default {
  name: "Check",
  data() {
    return {
      isLoading: false,
      selectForm: {
        keyword: "",
        time: [],
        repairUser: "",
        checkUser: "",
      },
      tableData: [],
      statusList: [
        { lable: "未完成", value: 0 },
        { lable: "已完成", value: 1 },
        { lable: "等待质检", value: 2 },
        { lable: "逾期", value: 3 },
        { lable: "逾期质检", value: 4 },
        { lable: "逾期完成", value: 5 },
      ],
      checkUserList: [],
      repairUserList: [],
      taskForm: {},
      materialList: [],
      isRepair: false,
    };
  },
  methods: {
    findName(arr, source, targetValue = "lable", sourceValue = "value") {
      if (!Array.isArray(arr)) {
        return;
      }
      let res = arr.find((e) => e[sourceValue] === source);
      return res && res[targetValue] ? res[targetValue] : "";
    },
    getData() {
      this.isLoading = true;
      let param = {};
      if (this.selectForm.keyword) {
        param.keyword = this.selectForm.keyword;
      }
      if (this.selectForm.repairUser) {
        param.repairUser = this.selectForm.repairUser;
      }
      if (this.selectForm.checkUser) {
        param.checkUser = this.selectForm.checkUser;
      }
      if (this.selectForm.time.length == 2) {
        let format = "YYYY-MM-DD HH:mm:ss";
        param.startTime = dayjs(this.selectForm.time[0]).format(format);
        param.endTime = dayjs(this.selectForm.time[1]).format(format);
      }
      this.postRequest("/repair_task/listMoney", param).then((resp) => {
        if (resp) {
          this.tableData = resp;
        }
        if (this.tableData.length > 0) {
          this.tableData.forEach((item) => {
            if (new Date(item.endTime) < new Date()) {
              item.status = 3;
            }
          });
        }
        this.isLoading = false;
      });
    },
    isOverdue(status) {
      if (status == 3) {
        return true;
      }
      return false;
    },
    checkTask(id) {
      this.taskForm.taskId = id;
      this.$confirm("是否通过质检?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        this.getRequest("/repair_task/check/" + id).then(() => {
          this.getData();
        });
      });
    },

    getMaterialList() {
      this.postRequest("/material/list").then((resp) => {
        this.materialList = resp;
      });
    },
  },
  created() {
    let user = JSON.parse(localStorage.getItem("user"));
    if (!user) {
      this.$router.replace("/");
    }
    this.getMaterialList();
    this.getData();
    this.getRequest("/user/list/1").then((resp) => {
      this.repairUserList = resp;
    });
    this.getRequest("/user/list/2").then((resp) => {
      this.checkUserList = resp;
    });
  },
};
</script>
<style lang="css" scoped>
.isRed {
  color: red;
}
</style>
